<template>
  <div class="linkProduct">
    <el-form ref="form2" :model="form2" label-width="80px">
      <el-row>
        <el-col :span="2">*选择产品</el-col>
        <el-col :span="10">
          <template>
            <el-radio class="radio" v-model="form2.productType " label=ANY style="float: left;" :disabled="publish">所有固收类产品</el-radio>
            <el-radio class="radio" v-model="form2.productType " label=ASSIGN style="float: left;" :disabled="publish">指定产品</el-radio>
          </template>
          <product-list @getProduct="getProductIds" :products="productInfo" v-if="showProduct" style="float: left;margin-left:20px;"></product-list>
        </el-col>
      </el-row>
      <el-row v-if="showProduct">
        <el-table :data="selectedProducts" class="productTable" >
          <el-table-column type="index"        label="序号" min-width="200"></el-table-column>
          <el-table-column prop="name"         label="产品名称" min-width="140"></el-table-column>
          <el-table-column prop="issuerName"   label="发行方" min-width="60"></el-table-column>
          <el-table-column prop="account"      label="募集额度" min-width="80"></el-table-column>
          <el-table-column prop="payedAccount" label="已付款金额" min-width="90"></el-table-column>
          <el-table-column                     label="操作" min-width="60">
            <template scope="scope">
              <el-button  @click.native.prevent="disabledRow(scope.$index, selectedProducts)" type="text" size="small" v-if="hasPublish(scope.row)" :disabled="hasDisabled(scope.row)">禁用
              </el-button>
              <el-button @click.native.prevent="deleteRow(scope.$index, selectedProducts)" type="text" size="small" v-else>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
      </el-row>
      <el-row>
        <el-button @click="prev" v-if="isCreate" class="buttonStep">上一步</el-button>
        <el-button @click="finish" v-if="isCreate" class="buttonStep">完成</el-button>
        <el-button @click="LinkProduct" v-else class="buttonStep">保存</el-button>
        <!--{{form2}}-->
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import ProductList from './ProductList.vue'
  import {postLog} from 'api/common/index.js'
  export default{
    props: ['pageType', 'productInfo'],
    data () {
      return {
        isCreate: true,
        form2: {
          activityId: '', //活动id
          productIds: [], //关联的产品id，子组件传出
          productType: 'ANY'//关联类型
        },
        selectedProducts: [],
        hasSelProductId: [],
        publish: false
      }
    },
    created () {
      if (this.pageType == 'edit') {
        this.isCreate = false;
        this.form2.activityId = this.$route.params.actId;
        if (this.$route.params.status == 1) {
          this.publish = true;
        } else {
          this.publish = false;
        }
      }
    },
    computed: {
      //根据选择的关联类型决定是否显示
      showProduct () {
        if (this.form2.productType === 'ANY') {
          return false
        } else if (this.form2.productType === 'ASSIGN') {
          return true;
        }
      }
    },
    watch: {
      //将查询到的产品关联信息导入页面
      productInfo (val, oldval) {
//        如果products为null,type在就在所有产品上
        if (val === null) {
          this.form2.productType = 'ANY';
        } else {
          this.form2.productType = 'ASSIGN';
//          选中产品的列表
          let arr = [...val];
          for (let i = 0; i < arr.length; i++) {
            arr[i].from = 'severData';
          }
          this.selectedProducts = [...val];
        }
      }
    },
    methods: {
//        禁用
      disabledRow (index, row) {
        if (this.form2.productIds != 0) {
          this.$alert('请先保存添加的产品');
          return
        }
        this.$confirm('你确定要禁用该产品吗', '提示', {
//          type: 'warning'
        }).then(() => {
          this.$http.put('/api-active/v1/api/activityCenter/activity/disableProduct?activityId=' + this.$route.params.actId + '&productId=' + row[index].id)
            .then((response) => {
              let data = response.body;
              if (data.resultCode == '200') {
                this.$emit('getData');
                this.$message({
                  type: 'info',
                  message: '页面已刷新'
                });
                this.form2.productIds = [];
              }
            })
        }).catch(() => {
        });
      },
//      删除
      deleteRow (index, rows) {
        if (rows.length == 1) {
          this.$alert('指定产品不能为空', '提示');
          return;
        }
//        删除产品
        let params = {activityId: this.$route.params.actId, productId: rows[index].id}
        if (rows[index].from) {
          if (this.form2.productIds != 0) {
            this.$alert('请先保存添加的产品');
            return
          }
          this.$confirm('你确定要移除该产品吗', '提示', {
//            type: 'warning'
          }).then(() => {
            this.$http.put('/api-active/v1/api/activityCenter/activity/deleteProduct', params)
              .then((response) => {
                debugger;
                let data = response.body;
                rows.splice(index, 1);
                this.$emit('getData');
                this.$message({
                  type: 'info',
                  message: '页面已刷新'
                });
                this.form2.productIds = [];
              });
          }).catch(() => {
          });
        } else {
          for (let key in this.form2.productIds) {
            if (rows[index].id == this.form2.productIds[key]) {
              this.form2.productIds.splice(key, 1);
            }
          }
          rows.splice(index, 1);
        }
      },
//      获得子组件选中的产品
      getProductIds (products) {
        let arr = [...this.selectedProducts];
        for (let i = 0; i < arr.length; i++) {
          for (let j = 0; j < products.length; j++) {
            if (products[j].id === arr[i].id) {
              products.splice(j, 1);
            } else {
            }
          }
        }
        for (let i = 0; i < products.length; i++) {
          this.form2.productIds.push(products[i].id);
        }
        this.selectedProducts = this.selectedProducts.concat(products);
      },
//      有的不再提交
      DuplicateRemovalArr (childId, selectedProducts) {
        childId = childId.filter(function (e) { return selectedProducts.indexOf(e) < 0; });
//          this.form2.productIds=childId;
      },
//      包含对象的数组去重:reduce方法
      DuplicateRemoval (arr) {
        let hash = {};
        arr = arr.reduce(function (item, next) {
          hash[next.name] ? '' : hash[next.name] = true && item.push(next);
          return item
        }, []);
        return arr;
      },
//      创建
      finish () {
        if (this.form2.productType == 'ANY') {
          this.form2.productIds = [];
        } else if (this.form2.productType == 'ASSIGN' && this.form2.productIds.length == 0) {
          this.$alert('指定产品不能为空', '提示');
          return;
        }
        this.$emit('startCreateAct', {productInfoFrom: this.form2, finishStep: 3})
      },
//      编辑页面提交
      LinkProduct () {
        if (this.form2.productType == 'ANY') {
          this.form2.productIds = [];
          this.selectedProducts = [];
        } else if (this.form2.productType == 'ASSIGN' && this.form2.productIds.length == 0) {
          this.$alert('未选择产品', '提示');
          return;
        }
        this.$http.put('/api-active/v1/api/activityCenter/activity/product', this.form2)
          .then((response) => {
            let data = response.body;
            if (data.resultCode == '200') {
              postLog('ACTIVITY_LIST_EDIT', this.form2.activityId, '', this.form2);
              this.form2.productIds = [];
              this.$alert('修改成功', '提示');
              this.$emit('getData');
            } else {
              this.$alert('修改失败', '提示');
            }
          })
      },
//      上一步
      prev () {
        this.$emit('back', {showModules: 'coupon', active: 3})
      },
//      判断是否已经发布
      hasPublish (row) {
//      version字段仅用于判断是初始化的数据还是添加
        if (this.$route.params.status == 1 && row.from == 'severData') {
          return true;
        } else {
          return false;
        }
      },
//      判断是否已经禁用
      hasDisabled (row) {
        if (row.enable == 'NO') {
          return true
        } else {
          return false
        }
      }
    },
    components: {
      ProductList: ProductList
    }
  }
</script>
<style lang="less">
@greenStyle:#63c5ce;
@orangeStyle:#f7931e;
    body #app .linkProduct{
    .buttonStep{
      width: 200px;
      border:0;
      background: @greenStyle;
      margin:30px 40px 0 40px;
      color:#fff;
    }
    .el-row {
      margin-top: 30px;
      display: block;
    }
    .el-table{
      .cell{
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
        text-overflow: ellipsis;
      }
    }
    .productTable .el-table th>div{
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
        text-overflow: ellipsis;
    }
    .el-table{
      th {
        background: #fff;
        .cell {
          font-size: 0.875rem;
          padding-left: 3px;
          padding-right: 3px;
          background: #fff;
          text-align: center;
        }
      }
      .el-table__body{
        color:#666666;
        .cell{
          font-size: 0.875rem;
          padding-left:3px;
          padding-right:3px;
          //height:3.125rem;
          //line-height:3.125rem;
        }
      }
      .el-button--text{
        color:@greenStyle;
        margin:0 5px;
      }
      .el-button--small{
        font-size: 0.875rem;
      }
      .is-disabled{
        color:#bfcbd9;
      }
    }
  }
</style>
